<script>
import Swiper from "swiper";

export default {
  name: "Carousel",
  /* 父组件传递过来的prop */
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    /* newSwiper实例的回调函数 */
    handleNewSwiper() {
      const mySwiper = new Swiper('.swiper', {
        // 循环模式选项
        loop: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 自动播放
        autoplay: {
          delay: 1500,//1.5秒切换一次，
          disableOnInteraction: false, //操作swiper之后，是否禁止autoplay
          pauseOnMouseEnter: true, // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
        },
        speed: 800,// 切换速度
      })
    }
  },
  watch: {
    /*
    *new Swiper（前提是页面结构【轮播图】已经完整了
		* 通过watch：数据监听，监听已有数据的变化（监听轮播图中的数据已经更新，但无法保证v-for已经执行完毕，需要组件实例对象身上的$nextTick（））
		* nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM(也就是说等到循环v-for结束之后再执行里面的回调函数，保证页面中结构已经完整了）
    **/
    list: {
      handler(newValue, oldValue) {
        // bannerList数据已经请求回来了由空数组变成有元素的数组
        this.$nextTick(() => {
          // v-for循环的结构已经循环渲染完毕
          this.handleNewSwiper()
        })
      },
    }
  }
}
</script>

<template>
  <div class="swiper" id="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,index) in list" :key="item.id">
        <img :src="item.imgUrl"/>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<style scoped lang="less">
.swiper {
  width: 100%;
  height: 100%;
  cursor: pointer;

  .swiper-wrapper {
    width: 100%;
    height: 100%;

    .swiper-slide {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;

      }
    }
  }
}
</style>
